<template>
  <el-select
    v-model="comValueArray"
    :disabled="disabled"
    :placeholder="placeholder"
    :style="{ width: width }"
    clearable="clearable"
    @change="change"
    multiple
  >
    <el-option
      v-for="item in options"
      :key="item.code"
      :label="item.name"
      :value="item.code"
    />
  </el-select>
</template>

<script setup>
import { dictStore } from '@/pinia/modules/dict'
import { useVModel } from '@vueuse/core'
import { compact } from 'lodash-es'
const dictStoreData = dictStore()
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    require: true,
    default: ''
  },
  dictCode: {
    require: true,
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  width: {
    type: String,
    default: '200px'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  disabledOptions: {
    type: Array,
    default() {
      return []
    }
  }
})

const comValue = useVModel(props, 'modelValue', emit)

const comValueArray = computed(() => {
  return compact(comValue.value.split(','))
})

const options = computed(() => {
  return formatDictCode()
})

const formatDictCode = () => {
  const code = props.dictCode
  const target = dictStoreData.dict?.find(item => item.code === code)
  return target ? target.children : []
}
const change = val => {
  comValue.value = val.join(',')
}
</script>

<style lang="scss" scoped>
//隐藏两个之后的所有Tag，并在第三个Tag之前展示...
:deep(.el-tag.el-tag--info:nth-child(n + 2)) {
  width: 0;
  padding: 0;
  height: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0);
  border-color: unset;
  background: none;
  i {
    display: none;
  }
}
:deep(.el-tag.el-tag--info:nth-child(2)) {
  position: relative;
  &:before {
    content: '...';
    position: absolute;
    left: 4px;
    top: -8px;
    width: 26px;
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    font-size: 14px;
    // background-color: #f4f4f5;
    color: #606266;
    box-sizing: border-box;
    // border: 1px solid#e9e9eb;
    // border-radius: 4px;
  }
}
</style>
